<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>点击换色</title>
  <style>
    :root {
      --zzbwith: 100%;
    }

    html,
    body {
      width: 100%;
      height: 100%;
    }

    * {
      margin: 0;
      padding: 0;
    }

    img,
    input {
      width: var(--zzbwith);
      height: var(--zzbwith);
    }

    input {
      padding: 0;
      position: absolute;
      cursor: pointer;
      mix-blend-mode: hue;
    }
  </style>
</head>

<body>
  <input type="color">
  <img
    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554399278209&di=d870385b486934a8b652869b59f9a810&imgtype=0&src=http%3A%2F%2Fimg.emao.net%2Fnews%2Fnd%2Fbbw%2Fbbvd.jpg"
    alt="">

</body>

</html>